<template>
    <div class="mine">
        <!-- 顶部导航 -->
        <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />

        <!-- 头像 Field -->
        <van-field label="头像" input-align="right" right-icon="arrow">
            <template #input>
                <van-image
                    round
                    width="45px"
                    height="45px"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
            </template>
        </van-field>

        <!-- 姓名 -->
        <van-field
            label="姓名"
            right-icon="arrow"
            input-align="right"
            readonly
            clickabl
            :value="user.nickname"
            placeholder="点击修改姓名"
            @click="nickNameDialogVisible = true"
        />

        <!-- 修改姓名弹框 -->
        <van-dialog
            v-model="nickNameDialogVisible"
            title="修改姓名"
            show-cancel-button
            @confirm="nicknameDialogConfirm"
        >
            <!-- 编辑信息输入框 -->
            <van-field v-model="nicknameValue" />
        </van-dialog>

        <!-- 邮箱 -->
        <van-field
            label="邮箱"
            right-icon="arrow"
            input-align="right"
            readonly
            clickabl
            :value="user.email"
            placeholder="点击修改邮箱"
            @click="emailDialogVisible = true"
        />

        <!-- 修改密码 -->
        <van-field
            label="修改密码"
            right-icon="arrow"
            input-align="right"
            readonly
            clickabl
            @click="passwordDialogVisible = true"
        />

        <!-- 个性签名 -->
        <van-field
            label="个性签名"
            right-icon="arrow"
            input-align="right"
            readonly
            clickable
            :value="user.mark"
            placeholder="点击修改个性签名"
            @click="markDialogVisible = true"
        />

        <!-- 性别 -->
        <van-field
            label="性别"
            right-icon="arrow"
            input-align="right"
            readonly
            clickable
            :value="user.sex"
            placeholder="点击选择性别"
            @click="sexAcVisible = true"
        />

        <!-- 性别选择 -->
        <van-action-sheet v-model="sexAcVisible">
            <van-picker
                title="性别选择"
                show-toolbar
                :columns="sexArr"
                @confirm="sexConfirm"
            />
        </van-action-sheet>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                nickname: 'rui',
                email: '531804271@qq.com',
                mark: '好好考试，不许作弊！',
                sex: '男',
            },
            sexArr: ['男', '女'],
            nickNameDialogVisible: false,
            emailDialogVisible: false,
            passwordDialogVisible: false,
            markDialogVisible: false,
            sexAcVisible: false,
            nicknameValue: '',
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async nicknameDialogConfirm() {
            // 发起修改用户信息的请求
            const res = await this.$http.put('/users', {
                nickname: this.nicknameValue,
            });
            console.log(res);
            if (res.code !== 204) {
                this.$toast({
                    type: 'fail',
                    message: res.message,
                });
                return;
            }
            // 更新页面中的姓名为新修改的值
            this.user.nickname = this.nicknameValue;
        },
        async sexConfirm(val) {
            console.log(val);
            if (val !== this.user.sex) {
                // 请求后台，修改性别
                const { code, message } = await this.$http.put('/users', {
                    sex: val,
                });
                console.log(code);
                // 如果报错，提示错误信息
                if (code !== 204) {
                    this.$toast({
                        type: 'fail',
                        message,
                    });
                    return;
                }
                // 修改成功后，需要更新页面的值
                this.user.sex = val;
            }
            // 关闭性别 ActionSheet
            this.sexAcVisible = false;
        },
    },
};
</script>

<style lang="less" scoped>
.van-field {
    display: flex;
    align-items: center;
}
</style>
